<template>
	<div class="login">
		<div class="login-header">
			<img src="../../assets/img/login.png" />
		</div>
		<div class="login-title">
			<span>登录</span>
		</div>
		<div class="login-form">
			<div class="form-item">
				<span>账号</span>
				<input type="text" placeholder="请输入账号"  v-model="phone"/>
			</div>
			<div class="form-item">
				<span>密码</span>
				<input type="text" placeholder="请输入密码" v-model="password" />
			</div>
			<div class="forget" @click="goForget">
				忘记密码
			</div>
		</div>
		<div class="login-btn" @click="goLogin">
			登录
		</div>
		<div class="login-btn1" @click="goRegister">
			注册
		</div>
	</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { Http } from '../../utils/request'
import {showToast, showSuccessToast, showFailToast, setToastDefaultOptions} from 'vant'
const $router = useRouter()
const store = useStore()
const goForget = () => $router.push('/forget')
const goRegister = () => $router.push('/register')

const phone = ref('18061420723')
const password = ref('123456')

const goLogin =  () => {
	if (phone.value === '' ) {
		showToast('请输入正确手机号')
		return
	}
	if(password.value === ''){
		showToast('请输入正确密码')
		return
	}
	 Http('/api/login','get', {
		phone: phone.value,
		password: password.value
	}).then((res: any) => {
		if(res.status === 200){
			store.commit('setNikeName',res.data.nikeName)
			localStorage.setItem('token', res.token)
			$router.push('/')
		}
	}).catch(err => {
		showFailToast('登录失败,请检查账号密码')
	})
}

</script>
<style lang="less" scoped>
.login-header {
	text-align: center;
	margin-top: 70px;
}

.login-header img {
	width: 220px;
	height: 240px;
}

.login-title {
	text-align: center;
	margin: 20px 0;
}

.login-form {
	width: 80%;
	margin: 0 auto;
}

.form-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 20px 0;
}

.form-item span {
	margin-top: 30px
}

.form-item input {
	margin-top: 30px;
	width: 85%;
	height: 70px;
	border: none;
	border-bottom: 1px solid #ccc;
}

.forget {
	text-align: right;
	margin-top: 20px;
	font-weight: 600;
}

.login-btn {
	width: 90%;
	height: 90px;
	line-height: 90px;
	text-align: center;
	background-color: rgb(63, 161, 157);
	color: #fff;
	border-radius: 50px;
	margin: 20px auto;
}

.login-btn1 {
	width: 90%;
	height: 90px;
	line-height: 90px;
	text-align: center;
	background-color: #fff;
	color: #000;
	border-radius: 50px;
	margin: 20px auto;
	border: 1px solid rgb(63, 161, 157);
}
</style>